<template>
  <!--banner-->
  <div class="banner">
    <!--PCbanner-->
    <div class="swiper-container banner_container pc_banner">
      <div class="swiper-wrapper" id="banner">
        <div class="swiper-slide banner_img_box" style="background-image: url('http://image.xuemei99.com/banner_pic_home_new.jpg')">
          <!--<img src="http://image.xuemei99.com/banner_pic_huoke.jpg" alt="">-->
          <div class="banner_content">
            <p class="font_50">获客宝</p>
            <p class="font_24 margin_top_20">让门店获客如此简单</p>
            <router-link to="/huoke"><button type="button" class="banner_btn banner_huoke_btn margin_top_40">了解详情</button></router-link>
          </div>
        </div>

        <div class="swiper-slide banner_img_box" style="background-image: url('http://image.xuemei99.com/banner2_pic_home_new.jpg')">
          <!--<img src="http://image.xuemei99.com/banner2_pic_home.jpg" alt="">-->
          <div class="banner_content">
            <p class="font_50">销售宝</p>
            <p class="font_24 margin_top_20">让顾客与门店销售触手可及</p>
            <router-link to="/market"><button type="button" class="banner_btn banner_huoke_btn margin_top_40">了解详情</button></router-link>
          </div>
          <!--<router-link to="/market"><button type="button" class="banner_market_btn"></button></router-link>-->
        </div>
        <div class="swiper-slide banner_img_box" style="background-image: url('http://image.xuemei99.com/banner3_pic_home_new.jpg')">
          <!--<img src="http://image.xuemei99.com/banner3_pic_home.jpg" alt="">-->
          <div class="banner_content">
            <p class="font_50">客连客</p>
            <p class="font_24 margin_top_20">让商家和商家的顾客连通起来</p>
            <router-link to="/kelianke"><button type="button" class="banner_btn banner_huoke_btn margin_top_40">了解详情</button></router-link>
          </div>
          <!--<router-link to="/kelianke"><button type="button" class="banner_kelianke_btn"></button></router-link>-->
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!--移动端banner-->
    <div class="swiper-container mobile_banner">
      <div class="swiper-wrapper">

        <div class="swiper-slide mobile_banner_bg" style="background-image: url('http://image.xuemei99.com/banner_pic_home.jpg')">
          <div class="col_fff">
            <p class="mobile_banner_title">获客宝</p>
            <p class="mobile_banner_sm_title">让门店获客如此简单</p>
            <router-link to="/huoke"><button type="button" class="bg_2577EF col_fff mobile_banner_btn">了解详情</button></router-link>
          </div>
        </div>

        <div class="swiper-slide mobile_banner_bg" style="background-image: url('http://image.xuemei99.com/mobile_banner2_pic_home.jpg')">
          <div class="col_fff">
            <p class="mobile_banner_title">销售宝</p>
            <p class="mobile_banner_sm_title">让顾客与门店销售触手可及</p>
            <router-link to="/market"><button type="button" class="bg_2577EF col_fff mobile_banner_btn">了解详情</button></router-link>
          </div>
        </div>

        <div class="swiper-slide mobile_banner_bg" style="background-image: url('http://image.xuemei99.com/mobile_banner3_pic_home.jpg')">
          <div class="col_fff">
            <p class="mobile_banner_title">客连客</p>
            <p class="mobile_banner_sm_title">让商家和商家的顾客连通起来</p>
            <router-link to="/kelianke"><button type="button" class="bg_2577EF col_fff mobile_banner_btn">了解详情</button></router-link>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  //每个子组价都需要抛出
  export default{
      name:"banner",
      methods:{

      },
    //在模板渲染之后调用
    mounted () {
      var mySwiper = new Swiper('.banner_container', {
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay: true,//可选选项，自动滑动
        width: window.innerWidth,
        loop: true,
        clickable : true
      });

      var mySwiper = new Swiper('.mobile_banner', {
        autoplay: true,//可选选项，自动滑动
        width: window.innerWidth,
        loop: true,
        clickable : true
      });
    },
    data () {
      return {

      }
    }
  }
</script>

<style scoped>
  .banner {

  }
  p{
    margin-bottom: 0;
  }
  .banner_img_box {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .banner_img_box img{
    width: 100%;
    height: 100%;
  }
  .banner_container {
    width: 100%;
    height: 420px;
  }

  .banner_img_box {
    position: relative;
  }
  .banner_content{
    color: #ffffff;
    text-align: left;
    width: 1180px;
    margin: 130px auto 0 auto;
    /*position: absolute;*/
    /*top: 28%;*/
    /*left: 14%;*/
  }
  .banner_btn{
    width: 116px;
    height: 36px;
    line-height: 36px;
    background-color: #2577EF;
    color: #ffffff;
  }
  .banner_huoke_btn,.banner_market_btn,.banner_kelianke_btn{
    /*position: absolute;*/
    /*width: 130px;*/
    /*opacity: 0;*/
    /*z-index: 999;*/
    /*height: 40px;*/
    /*left: 9%;*/
    /*top: 63%;*/
  }
</style>
